<template>
  <div class="bottom_navs">

    <router-link to="/home" class="bottom_nav">
      <a :class="homeActive" @click="updateIcon">
        <i class="iconfont icon-zhuye"></i>
        首页
      </a>
    </router-link>

	<router-link to="/category"  class="bottom_nav">
	  <a :class="categoryActive" @click="updateIcon">
	    <i class="iconfont icon-fenlei1"></i>
	    分类
	  </a>
	</router-link>

    <router-link to="/cart"  class="bottom_nav">
      <a :class="cartActive" @click="updateIcon">
        <i class="iconfont icon-gouwuche1"></i>
        购物车
        <span class="cart-counter" v-show="cartCounter > 0">{{ cartCounter }}</span>
      </a>
    </router-link>

    <router-link to="/mine"  class="bottom_nav">
      <a :class="mineActive" @click="updateIcon">
        <i class="iconfont icon-gerenzhongxin"></i>
        我的
      </a>
    </router-link>

  </div>
</template>

<script>
export default {
  data() {
    return {
      homeActive: '',
      categoryActive: '',
      cartActive: '',
      mineActive: ''
    };
  },

  methods: {
    updateIcon() {
      let currentPath = this.currentPath;

      if (currentPath.includes('home')) {
        this.homeActive = 'active';
        this.cartActive = '';
        this.mineActive = '';
      } else if (currentPath.includes('cart')) {
        this.homeActive = '';
        this.cartActive = 'active';
        this.mineActive = '';
      } else if (currentPath.includes('category')) {
        this.homeActive = '';
        this.categoryActive = 'active';
        this.mineActive = '';
      } else if (currentPath.includes('mine')) {
        this.homeActive = '';
        this.cartActive = '';
        this.mineActive = 'active';
      } else {
        this.homeActive = '';
        this.cartActive = '';
        this.mineActive = '';
      }
    }
  },
  computed: {
    cartCounter () {
      return this.$store.state.cartCounter;
    },
    currentPath() {
      return this.$route.path;
    }
  },
  mounted() {
    this.updateIcon();
  }
};
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/variable.scss";

  .cart-counter{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    margin-left: -15px;
    line-height: 20px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 10px;
  }


.bottom_navs {
  overflow: hidden;
  position: fixed;
  z-index: 999;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #fff;
  display: -moz-box;
  display: -webkit-box;
  display: box;
  border-top:1px solid #ECECEC;
}


/* .bottom_navs:before {
  content: ' ';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  color: #dedede;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  top: 0;
  border-top: 1px solid #dedede;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
 */

.bottom_nav {
  height: 55px;
  color: #999;
  font-size: 12px;
  padding-top: 5px;
  text-align: center;
  width: 100%;
  display: block;
  outline: none;
  transition-duration: 150ms;
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
}

.bottom_navs a.active {
  color: $colorPrimary;
}

.bottom_navs > a i {
  font-size: 20px;
  display: block;
  margin: 5px auto 5px auto;
}
</style>
